@use "sass:math";


@import "../../node_modules/normalize.css/normalize.css";
@import "../../node_modules/suitcss-utils-size/index.css";
//@import "../../node_modules/element-plus/theme-chalk/src/index.scss";

@import 'variables.scss';
@import 'mixin.scss';
@import 'transition.scss';
@import 'element-ui.scss';
@import 'sidebar.scss';


:root {
  @for $i from 1 through 50 {
    --z-size-#{$i}: #{$i}px;
    .a-space-mb-#{$i} {
      margin-bottom: var(--z-size-#{$i});
    }
    .a-space-ml-#{$i} {
      margin-left: var(--z-size-#{$i});
    }
    .a-space-mr-#{$i} {
      margin-right: var(--z-size-#{$i});
    }
    .a-space-mt-#{$i} {
      margin-top: var(--z-size-#{$i});
    }
    .a-space-mh-#{$i} {
      margin-left: var(--z-size-#{$i});
      margin-right: var(--z-size-#{$i});
    }
    .a-space-mv-#{$i} {
      margin-top: var(--z-size-#{$i});
      margin-bottom: var(--z-size-#{$i});
    }
    .a-space-pt-#{$i} {
      padding-top: var(--z-size-#{$i});
    }
    .a-space-pb-#{$i} {
      padding-bottom: var(--z-size-#{$i});
    }
    .a-space-pv-#{$i} {
      padding-top: var(--z-size-#{$i});
      padding-bottom: var(--z-size-#{$i});
    }
    .a-space-pl-#{$i} {
      padding-left: var(--z-size-#{$i});
    }
    .a-space-pr-#{$i} {
      padding-right: var(--z-size-#{$i});
    }
    .a-space-ph-#{$i} {
      padding-left: var(--z-size-#{$i});
      padding-right: var(--z-size-#{$i});
    }
  }
  --themeColor: #409eff
}

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app{
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  outline: none;
  text-decoration: none;
}

div:focus{
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

//main-container全局样式
.app-main{
  min-height: 100%;
}

.app-container {
  padding: 30px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  // flex-direction: row-reverse;
}

.filter-container {
  padding-bottom: 10px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 10px 0;
  }
}

.total {
  font-size: 14px;
  color: #606266;
  line-height: 32px;
  span {
    margin-right: 15px;
  }
}


.el-date-editor .el-range-separator{padding: 0 !important;width: auto !important;}


.el-dialog {
  //margin: auto !important;
  --el-dialog-width: 90%;
  //max-width: 99vw !important;
  //transform: translateY(10%);
  top: var(--el-dialog-margin-top);
  .el-dialog__header {
    padding-bottom: 30px;
  }
  .el-dialog__body {
    max-height: 90vh;
    overflow: auto;
    position: relative;
    padding-top: 0;
  }
}

.el-dialog--no-modal {
  pointer-events: none;
  background-color: transparent;
  > .el-overlay-dialog {
    > * {
      pointer-events: all;
    }
  }
}

.el-dialog-align-middle {
  transform: translateY(-50%);
  top: 50%;
}


.cm-filed__label {
  display: inline-flex;
  align-items: center;
  color: var(--cm-filed__label-color, var(--el-text-color-regular))
}


$row-item-length: 2;
$row-gutter-length: $row-item-length * 2;
$row-gutter-deliver:  $row-item-length + 1;
$element-list-item-g: 12px;
$element-list-item-x: math.div($element-list-item-g *   $row-gutter-length, $row-gutter-deliver) ;
$first-last-with: $element-list-item-g * $row-item-length - $element-list-item-x;
.g-list-group-item__element {
  --element-list-item-h: 30px;
  height: var(--element-list-item-h);
  width: calc(100% - #{$element-list-item-g * 2} - 2px);

  margin-bottom: 15px;
  border: 1px solid #d1dbe5;
  border-radius: 4px;
  font-size: 13px;
  line-height:  var(--element-list-item-h) !important;
  box-sizing: border-box;
  padding: 0 10px;
  cursor: pointer;
}

.g-list-group-item {
  &:nth-child(2n+1) {
    .g-list-group-item__element {
      margin-left: $element-list-item-x;
    }
    .element-list-item {
      margin-left: $element-list-item-x;
    }
  }
  &:nth-child(2n) {
    .g-list-group-item__element {
      margin-left: $element-list-item-x - $first-last-with;
    }
    .element-list-item {
      margin-left: $element-list-item-x - $first-last-with;
    }
  }

  &--hidden {
    display: none;
  }
}

.g-pointer-events-none-modal {
  > .el-overlay {
    //background-color: transparent;
    width: 0;
    > * {
      pointer-events: none;
      > * {
        pointer-events: all;
      }
    }
  }
}

xy-tab-content {
  box-sizing: border-box;
}

view {
  display: block;
}

// APP
@import "app.scss";
